<template>
  <div>

    <div style="margin: 3px;">
      <h1 style="font-size: 20px;text-align: center;">车位信息</h1>
      <!-- 按钮（新增，上架，下架） -->
      <el-button style="float: left;" @click="stallAdd" type="success">新增车位</el-button>
      <el-button style="float: left;" @click="stallUpDown(1)" type="primary">上架</el-button>
      <el-button style="float: left;margin-left: 10px;margin-right: 10px;" @click="stallUpDown(0)" type="danger">下架</el-button>
      <!-- 类型下拉框 -->
      <el-select style="float: left;" @change="selectType(stallType)" v-model="stallType" clearable
        placeholder="选择车位类型">
        <el-option v-for="sl in typeList" :key="sl.stallType" :label="sl.stallTypeName"
          :value="sl.stallType">
        </el-option>
      </el-select>
      <!-- 归属下拉框 -->
      <el-select style="float: left;" @change="selectAffiliation(stallInfoAffiliation)" v-model="stallInfoAffiliation" clearable
        placeholder="选择车位归属">
        <el-option v-for="sl in affiliationList" :key="sl.stallInfoAffiliation" :label="sl.stallAffiliationName"
          :value="sl.stallInfoAffiliation">
        </el-option>
      </el-select>
      <!-- 状态下拉框 -->
      <el-select style="float: left;" @change="selectState(stallUpDownState)" v-model="stallUpDownState" clearable
        placeholder="选择车位状态">
        <el-option v-for="sl in upDownStateList" :key="sl.stallUpDownState" :label="sl.stallUpDownStateName"
          :value="sl.stallUpDownState">
        </el-option>
      </el-select>
    </div>

    <!-- 新增弹窗 -->
    <el-dialog title="新增车位信息" :visible.sync="dialogVisibleAdd" width="40%" :before-close="handleClose">
      <el-form  label-width="80px" :model="stallInfoAdd">
        <el-form-item label="车位区域">
          <el-input v-model="stallInfoAdd.stallInfoArea"  placeholder="请输入字母"></el-input>
        </el-form-item>
        <el-form-item label="车位编号" >
          <el-input v-model="stallInfoAdd.startStallInfoNum"  placeholder="请开始的车位编号(数字)"></el-input>
        </el-form-item>
        <el-form-item label="添加数量"  >
          <el-input v-model="stallInfoAdd.stallInfoCount" placeholder="请输入数字"></el-input>
        </el-form-item>
        <el-form-item label="车位类型">
          <el-select v-model="stallInfoAdd.stallType" placeholder="请选择车位类型">
            <el-option label="普通车位" value="0"></el-option>
            <el-option label="充电车位" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="confirm">立即创建</el-button>
          <el-button   @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 展示列表 -->
    <div style="border: 1px silver solid;width: 1200px;height: 500px;margin-top: 62px;">
      <el-table ref="multipleTable" :data="pageInfo.records" style="width: 100%;" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="50">
        </el-table-column>
        <el-table-column prop="stallInfoArea" label="车位区域" width="180">
        </el-table-column>
        <el-table-column prop="stallInfoNum" label="车位编号" width="180">
        </el-table-column>
        <el-table-column prop="stallType" label="车位类型" width="180">
          <template slot-scope="scope">
            <span>{{scope.row.stallType==0?'普通车位':'充电车位'}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="stallInfoAffiliation" label="车位归属" width="180">
          <template slot-scope="scope">
            <span>{{scope.row.stallInfoAffiliation==0?'出租客':'物业'}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="stallUpDownState" label="车位状态" width="180">
          <template slot-scope="scope">
            <span>{{scope.row.stallUpDownState==0?'下架':'上架'}}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="info" v-if="scope.row.stallInfoAffiliation==0?true:false" @click="details(scope.row)" size="small">信息详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 详情弹窗 -->
      <el-dialog title="出租客信息" :visible.sync="dialogVisible" width="40%">
        <el-form  label-width="80px" :model="rentersInfo">
          <el-form-item label="姓名">
            <el-input v-model="rentersInfo.rentersInfoName"></el-input>
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="rentersInfo.rentersInfoTel"></el-input>
          </el-form-item>
        </el-form>
      </el-dialog>

      <!-- 列表分页 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="pageInfo.current" :page-sizes="[1, 2, 3, 4]" :page-size="pageInfo.size"
        layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
  export default {
    name: 'StallInfo',
    data () {
      return {
        stallUpDownState:'',
        stallType:'',
        stallInfoAffiliation:'',
        pageInfo:{},
        multipleSelection: [],//勾选项数组
        typeList: [{
            stallType: '0',
            stallTypeName: '普通车位'
          },
          {
            stallType: '1',
            stallTypeName: '充电车位'
          }
        ],
        affiliationList: [{
            stallInfoAffiliation: '0',
            stallAffiliationName: '出租客'
          },
          {
            stallInfoAffiliation: '1',
            stallAffiliationName: '物业'
          }
        ],
        upDownStateList: [{
            stallUpDownState: '0',
            stallUpDownStateName: '下架'
          },
          {
            stallUpDownState: '1',
            stallUpDownStateName: '上架'
          }
        ],
        dialogVisible:false,//信息详情中
        rentersInfo:{},
        stallInfoIds:[],
        dialogVisibleAdd:false,//新增车位信息中
        stallInfoAdd:{}
      }
    },
    methods:{

      //确定(新增)
      confirm(){
        console.log(this.stallInfoAdd)
        this.$http.post("/stall/stallInfo/addStall.certified",this.stallInfoAdd).then(resp=>{
          if(resp.data.code==200){
            alert(resp.data.message)
            this.stallInfoAdd = {}
            this.showStallInfo()
            this.dialogVisibleAdd = false            
          }else alert(resp.data.message);
        })
      },

      //取消(新增)
      cancel(){
        this.stallInfoAdd = {}
        this.dialogVisibleAdd = false
      },

      //车位新增
      stallAdd(){
        this.dialogVisibleAdd = true
      },

      // 弹框取消按钮
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },

      //上下架
      stallUpDown(stallUpDownState){
        var stallList  = this.multipleSelection
        this.stallInfoIds = []
        for(var i = 0; i < stallList.length;i++){
          this.stallInfoIds.push(stallList[i].stallInfoId)
        }

        this.$http.post("/stall/stallInfo/certifiedSetStallState.certified",{
          stallUpDownState:stallUpDownState,
          stallInfoIds:this.stallInfoIds
        }).then(resp=>{
          if(resp.data.code==200){
            alert(resp.data.message);
            this.showStallInfo(null,null,this.stallUpDownState,this.stallType,this.stallInfoAffiliation)
          }else alert(resp.data.message);
        })
      },

      //已选择勾选项
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },

      //出租客信息
      details(row){
        this.dialogVisible = true
        this.$http.post("/stall/stallInfo/certifiedStallDetails.certified/"+row.stallInfoId).then(resp=>{
          if(resp.data.code==200){
            this.rentersInfo = resp.data.data
          }else{
            this.rentersInfo = {}
          }
        })
      },

      //分页设置
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.showStallInfo(this.pageInfo.current, val)
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.showStallInfo(val, this.pageInfo.size)
      },

      //车位状态
      selectState(stallUpDownState){
        this.commmon(null,null,stallUpDownState,this.stallType,this.stallInfoAffiliation)
      },

      //车位归属
      selectAffiliation(stallInfoAffiliation){
        this.commmon(null,null,this.stallUpDownState,this.stallType,stallInfoAffiliation)
      },

      //车位类型
      selectType(stallType){
        this.commmon(null,null,this.stallUpDownState,stallType,this.stallInfoAffiliation)
      },

      //展示车位信息
      showStallInfo(current,size,){
        this.commmon(current,size,this.stallUpDownState,this.stallType,this.stallInfoAffiliation)
      },

      //查询车位信息（公共）
      commmon(current,size,stallUpDownState,stallType,stallInfoAffiliation){
        this.$http.post("/stall/stallInfo/certifiedSelect.certified", {
          size: size,
          current: current,
          stallUpDownState:stallUpDownState,
          stallType: stallType,
          stallInfoAffiliation:stallInfoAffiliation
        }).then(resp => {
          if (resp.data.code == 200) {
            this.pageInfo = resp.data.data
          } else {
            this.pageInfo = {}
          }
        })
      }
    },
    created(){
      this.showStallInfo()
    }
  }
</script>

<style>
</style>
